<!--替身/其他任务-->
<template>
    <div id="serverConfirm">
      <!--后退-->
      <img class="back" src="../../../assets/homepage/back.png" alt="" onclick="history.go(-1)"> 
      <div class="oltrocityTHeader">
          <el-steps align-center :active="active" finish-status="success">
                <el-step title="已接单"></el-step>
                <el-step title="接单方确认"></el-step>
                <el-step title="发布方确认"></el-step>
          </el-steps>
          <img @click="callphone" style="position:absolute;right:5.5rem;top:7.25rem;width:3.4rem;height:4rem;"src="../../../assets/me/olCall.png" alt="">
          <img @click="sendMsg" style="position:absolute;right:1.5rem;top:9rem;width:3.4rem;height:4rem;"src="../../../assets/me/olSetMessage.png" alt="">
          <div class="olATb">
              <!--头像 名称 星星评论 接单 退单-->
              <div class="olATbFirst" style="height:100%;width:100%;">
                   <img style="height:3rem;width:3rem;border-radius:50%;margin:3.5rem 0px 0px 3rem;" :src="showData.userModel.headPortrait" alt=""></p>
                   <section style="display:flex;margin:0.25rem 0px 0px 2.5rem;">
                       <div class="me" style="width:5rem;height:2.5rem;">
                          <section style="display:flex;color:#000000;font-weight:700;font-size:0.5rem;">
                              <p>{{showData.userModel.nickName}}</p><img v-if="showData.userModel.sex==1" style="height:0.75rem;width:0.75rem;margin-left:0.25rem;" src="../../../assets/me/male.png" alt=""><img v-if="showData.userModel.sex==2" style="height:0.75rem;width:0.75rem;margin-left:0.25rem;" src="../../../assets/me/women.png" alt="">
                          </section>
                          <section  class="stars">
                             <img v-for="item in showData.userModel.totalStar" src="../../../assets/icon/starHav.png" alt="">
                             <img v-for="item in unTotalStar" style="width:11px;height:11px;" src="../../../assets/icon/unstarHav.png" alt="">
                          </section>
                       </div>
                       <div class="getAndReturn" style="width:6rem;height:2rem;display:flex;padding-top:0.4rem;">
                            <section style="width:50%;line-height:1;text-align:center;">
                                  <img style="height:0.9rem;width:0.8rem;"src="../../../assets/me/olget.png" alt="">
                                  <br><span style="font-size:0.6rem;color:#34a498;">催单</span>
                            </section>
                            <section style="width:50%;line-height:1;text-align:center;border-left:1px solid #e2e2e2;">
                                  <img style="height:0.9rem;width:1rem;"src="../../../assets/me/olreturn.png" alt="">
                                  <br><span style="font-size:0.6rem;color:#d72109;" @click="chargeback">退单</span>
                            </section>
                       </div>
                   </section>
                   <section style="display:flex;margin:1.75rem 0px 0px 0.75rem;width:90%;justify-content:space-between;">
                        <p style="font-size:1rem;color:#34a498;">{{showData.amount}} ￥</p>
                        <p style="font-size:0.7rem;color:#888888;margin-top:0.25rem;">{{turnTime(showData.orderTime)}} 发布</p>
                   </section>
                  <section style="display:flex;margin:0.75rem 0px 0px 0.75rem;width:90%;justify-content:space-between;">
                     <p style="font-size:0.75rem;color:#000000;">{{showData.serverName}}</p>
                     <!--<p v-if="showData.taskModel.womanSum"><img style="height:1.5rem;width:2.25rem;" src="../../../assets/homepage/gril.png" alt=""><br><span style="font-size:0.6rem;color:#9a9a9a;">仅限女生</span></p>
                     <p v-if="showData.taskModel.manSum"><img style="height:1.5rem;width:2.25rem;" src="../../../assets/homepage/boy.png" alt=""><br><span style="font-size:0.6rem;color:#9a9a9a;">仅限男生</span></p>
                     <p v-if="showData.taskModel.allSum"><img style="height:1.5rem;width:2.25rem;" src="../../../assets/homepage/un.png" alt=""><br><span style="font-size:0.6rem;color:#9a9a9a;">男女不限</span></p>--> 
                  </section>
              </div>
          </div>
      </div>
      <button class="olBtn"  @click="confirmOrder">确认订单</button>
    </div>
</template>
<script>
import turnTime from '../../../server/dataTime.js'
 export default {
     data(){
         return {
             unTotalStar:undefined,
             turnTime:turnTime,
             showData:{
                     userModel:{
                         nickName:undefined,
                         headPortrait:undefined,
                     }
             },
             active:0
         }
     },
      created(){
         this.getDetailData()
     },
      methods:{
          chargeback(){
            this.$api.chargeback(this.showData.id).then((res)=>{
                if(res.code=='000000'){
                   //
                }
            })
          },
        //  根据id获取详情
        getDetailData(){
            this.$api.getorderCommBI(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.unTotalStar = 5 - Number(res.data.userModel.totalStar)
                    console.log('res.data')
                     console.log(res.data)
                    this.showData = res.data
                }
            })
        },
        // 确认订单
        confirmOrder(){
             this.$api.confirmOrder(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.$router.push({
                        path: '/Evaluation/s'+this.showData.id,
                    })
                }
            })
        },
        callphone(){
            window.location.href = "tel:"+this.showData.userModel.phoneNumber;
        },
        sendMsg(){
            window.location.href = "tel:"+this.showData.userModel.phoneNumber;
        }
     }
 }
</script>
<style lang="">
#serverConfirm{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/olBackground.png);
}
#serverConfirm .back{
    position:fixed;
    height:1.1rem;
    width:0.6rem;
    top:1.25rem;
    left:1.25rem;
    z-index:2;
}

#serverConfirm .el-steps{
    padding-top:0.8rem;
}
#serverConfirm .el-step__icon.is-text {
    border-radius: 50%;
    border: 0px solid;
    border-color: inherit;
}
#serverConfirm .el-step__icon {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0px;
}
#serverConfirm .el-step.is-horizontal .el-step__line {
    top: 0.75rem;
}
#serverConfirm .el-step__title.is-process {
    font-weight: 500;
    color: #303133;
}
#serverConfirm .el-step__title {
    font-size: 0.6rem;
    line-height: 1.25rem;
}
#serverConfirm .olATb{
    height:24rem;
    margin:2.5rem 0.5rem;
    background-size:100% 100%;
    background-image:url(../../../assets/me/olRubbitBackground.png);
}
#serverConfirm .stars > img{
    height:0.75rem;
    width:0.75rem;
}
#serverConfirm .olBtn{
  height:2rem;
  width:50%;
  margin:0px 25%;
  text-align:center;
  line-height:2rem;
  font-size:0.8rem;
  color:#FFF;
  border-radius:13px;
  background:#29a193;
}
</style>
